<template>
  <div class="main-container">
    <el-form ref="createForm" :model="taskData" :rules="rules">
      <!-- 基本配置 -->
      <div class="data-show">
        <div class="data-actions">
          <h3>基本配置</h3>
        </div>
        <div class="data-table">
          <div class="common-row row-between">
            <div class="common-item item-5">
              <label class="condition-label">算法名称</label>
              <el-form-item class="condition-input" prop="name">
                <el-input type="text" placeholder="请输入算法名称" v-model="taskData.name" />
              </el-form-item>
            </div>
            <div class="common-item item-5">
              <label class="condition-label">算法平台</label>
              <el-form-item class="condition-input radio-input" prop="system">
                <el-radio @change="systemChange" v-for="(item, index) in systems" :key="index" :label="item.name" :value="item.id" v-model="taskData.system">
                  <span>{{ item.name }}</span>
                </el-radio>
              </el-form-item>
            </div>
          </div>
          <div class="common-row">
            <div class="common-item item-10">
              <label class="condition-label">算法描述</label>
              <el-form-item class="condition-input" prop="description">
                <el-input v-model="taskData.description" maxlength="100" type="textarea" show-word-limit rows="4" resize="none" placeholder="请输入算法描述" />
              </el-form-item>
            </div>
          </div>
        </div>
      </div>
      <SelectList
        isCondition
        :title="parameter.title"
        :loading="parameter.condition.loading"
        :list="parameter.list"
        :condition="parameter.condition"
        :condition-list="parameter.conditionList"
        v-model:selectId="taskData.userParamId"
        @get-more="getParameters"
        @del-condition="delParameterCondition"
      >
        <template #data-condition>
          <el-form :model="parameter.condition" size="small">
            <div class="conditions-item">
              <label class="condition-label">标题搜索：</label>
              <el-form-item class="condition-form-item">
                <el-input 
                  clearable
                  size="default"
                  class="condition-input" 
                  v-model="parameter.condition.name" 
                  placeholder="请输入参数名称"
                  @keydown.native.enter.prevent="conditionGetParameters('name', parameter.condition.name, parameter.condition.name)"
                  @change="conditionGetParameters('name', $event, $event)" 
                />
              </el-form-item>
            </div>
          </el-form>
        </template>
      </SelectList>
      <transition :name="stepTransition" mode="out-in">
        <div class="data-show" :key="currentStep.key">
          <div class="data-actions">
            <h3>算法组合</h3>
          </div>
          <div class="data-table data-table-step">
            <h3 class="algo-title">{{ currentStep.title }}</h3>
            <div class="algo-options">
              <el-radio @change="stepChange" v-model="currentStep.select" :disabled="item.disabled" v-for="(item, index) in currentStep.options" :label="item.label" :value="item.value"></el-radio>
            </div>
            <div class="btn-container">
              <div class="btns">
                <button :disabled="currentStep.key === 'one'" type="button" class="btn" @click="handlePrevious">上一步</button>
                <button :disabled="taskData.stepFinished" type="button" class="btn" @click="handleNext">下一步</button>
              </div>
            </div>
          </div>
        </div>
      </transition>
      <!-- 表格式模块库选择 -->
      <transition name="upload">
        <div class="data-show" v-if="taskData.stepFinished">
          <div class="data-actions">
            <h3>模块静态库选择</h3>
          </div>
          <div class="data-table">
            <div class="module-table">
            <el-table class="modulelibs-table" border :data="moduleLibs" stripe show-header>
              <el-table-column label="序号" align="center" type="index" width="100" />
              <el-table-column label="名称" align="center" prop="moduleLibName"  />
              <el-table-column label="是否默认" align="center" prop="moduleLibName">
                <template #default="{row}">
                  {{ row.isDef === 1 ? '是' : '否' }}
                </template>
              </el-table-column>
              <el-table-column label="模块库" align="center" prop="moduleLibName">
                <template #default="{row}">
                  <div class="table-actions">
                    <button type="button" class="aniTxtBtn" :class="{'main-color': row.select, 'red': !row.select}" @click="showModuleSelect(row)">{{ row.moduleName ? row.moduleName : '选择' }}</button>
                  </div>
                </template>
              </el-table-column>
              <!-- 没有数据时显示 -->
              <template #empty>
                <i class="iconfont icon-wushuju1 data-empty-icon"></i>
                <h3 class="data-empty">暂无数据</h3>
              </template>
            </el-table>
          </div>
          </div>
        </div>
      </transition>
    </el-form>
    <transition name="upload">
      <div class="btn-groups" v-if="isBtnGroupsShow">
        <button type="button" class="btn btn-normal" @click="back">取消</button>
        <button type="button" class="btn" @click="handleCreate">确定</button>
      </div>
    </transition>
    <Dialoger
      mask
      closable
      width="60%"
      :title="currentModuleLib ? `模块静态库选择-${currentModuleLib.moduleLibName}` : '模块静态库选择'"
      :visible="moduleDialogFlag"
      @confirm="handleModuleDialogConfirm"
      @cancel="handleModuleDialogCancel"
    >
      <div class="module-table">
      <el-table
        class="module-table"
        border 
        stripe
        show-header
        highlight-current-row 
        ref="moduleRef"
        v-loading="currentModuleLib.condition.loading"
        :data="currentModuleLib.list"
        @current-change="moduleSelectTable"
      >
        <el-table-column label="序号" align="center" type="index" width="100" />
        <el-table-column label="名称" align="center" prop="name"  />
        <el-table-column label="负责人" align="center" prop="createBy"  />
        <el-table-column label="创建时间" align="center" show-overflow-tooltip prop="createTime" />
        <el-table-column label="算法平台" align="center" show-overflow-tooltip prop="system">
          <template #default="{ row }">
            {{ getShow(row.system, 'id', systems, 'name') }}
          </template>
        </el-table-column>
        <el-table-column label="模块类别" align="center" show-overflow-tooltip prop="moduleLibName">
          <template #default="{ row }">
            {{ row.moduleLibName ? row.moduleLibName : '--' }}
          </template>
        </el-table-column>
        <el-table-column label="是否默认" align="center" show-overflow-tooltip prop="isDefault">
          <template #default="{row}">
            {{ typeof row.isDefault === Number && row.isDefault === 0 ? '是' : '否' }}
          </template>
        </el-table-column>
        <el-table-column label="状态" align="center" show-overflow-tooltip prop="status">
          <template #default="{ row }">
            {{ getShow(row.status, 'value', taskStatus, 'label') }}
          </template>
        </el-table-column>
        <!-- 没有数据时显示 -->
        <template #empty>
          <i class="iconfont icon-wushuju1 data-empty-icon"></i>
          <h3 class="data-empty">暂无数据</h3>
        </template>
      </el-table>
      </div>
      <Pagination 
        v-show="currentModuleLib.condition.totalRow > 0" 
        :total="currentModuleLib.condition.totalRow"
        v-model:page="currentModuleLib.condition.pageNumber"
        v-model:limit="currentModuleLib.condition.pageSize"
        @pagination="moduleDialogPageChange" 
      />
    </Dialoger>
  </div>
</template>
<script setup>
import SelectList from '@/components/SelectList.vue';
import useAppStore from '@/stores/app';
import Dialoger from '@/components/common/Dialoger.vue';
import Pagination from '@/components/common/Pagination.vue';
import * as rule from '@/utils/rules.js';
import * as request from '@/api/algo.js';
import { getParameterList } from '@/api/parameter.js';
import { getModuleAlgos } from '@/api/module.js';
import { api } from '@/utils/status.js';
import { ElMessage } from 'element-plus';
import { ref, nextTick, computed, onActivated, onMounted } from 'vue';
import { useRouter } from 'vue-router';

// 算法组合步骤对应的默认选项对象
const defaultOptions = {
  one: [
    { value: '110001', label: 'JPEG' },
    { value: '110002', label: 'BMP', disabled: true },
    { value: '110003', label: 'TIFF', disabled: true },
    { value: '110004', label: 'PNG', disabled: true },
  ],
  two: [
    { value: '210001', label: '是', disabled: true },
    { value: '210002', label: '否' }
  ],
  three: [
    { value: '220001', label: 'Twitter' },
    { value: '220002', label: '微博' },
    { value: '220003', label: 'Facebook' },
    { value: '220004', label: '微信' }
  ],
  four: [
    { value: '310001', label: '矩阵码', disabled: true },
    { value: '310002', label: '湿纸码', disabled: true },
    { value: '310003', label: 'STC' },
    { value: '310004', label: '极化隐写码', disabled: true },
    { value: '310005', label: '双层STC码', disabled: true }
  ],
  // 全部的
  five: [
    { value: '410001', label: 'JPEG-UNIWARD', disabled: true },
    { value: '410002', label: 'FAST-JPEG-UNIWARD', disabled: true },
    { value: '410003', label: 'JPEG-SI-UNIWARD', disabled: true },
    { value: '410004', label: 'JPEG-UED', disabled: true },
    { value: '410005', label: 'JPEG-UERD' },
    { value: '410006', label: 'JPEG-NAS', disabled: true },
    { value: '410007', label: 'ROBUST-TCB', disabled: true },
    { value: '410008', label: 'ROBUST-CRE', disabled: true },
    { value: '410009', label: 'SPATIAL-UNIWARD', disabled: true },
    { value: '410010', label: 'SPATIAL-HILL', disabled: true },
    { value: '410011', label: 'SPATIAL-HUGO', disabled: true },
    { value: '410012', label: 'SPATIAL-WOW', disabled: true }
  ],
  // 是JPEG 不是鲁棒
  fiveA: [
    { value: '410001', label: 'JPEG-UNIWARD', disabled: true },
    { value: '410002', label: 'FAST-JPEG-UNIWARD', disabled: true },
    { value: '410003', label: 'JPEG-SI-UNIWARD', disabled: true },
    { value: '410004', label: 'JPEG-UED', disabled: true },
    { value: '410005', label: 'JPEG-UERD' },
    { value: '410006', label: 'JPEG-NAS', disabled: true }
  ],
  // 是JPEG 是鲁棒
  fiveB: [
    { value: '410007', label: 'ROBUST-TCB', disabled: true },
    { value: '410008', label: 'ROBUST-CRE', disabled: true }
  ],
  // 不是JPEG
  fiveC: [
    { value: '410009', label: 'SPATIAL-UNIWARD', disabled: true },
    { value: '410010', label: 'SPATIAL-HILL', disabled: true },
    { value: '410011', label: 'SPATIAL-HUGO', disabled: true },
    { value: '410012', label: 'SPATIAL-WOW', disabled: true }
  ]
};
const systems = api.common.systems;
const taskStatus = api.common.status;
const rules = {
  name: rule.createRequiredRule('算法名称不能为空'),
  system: rule.createRequiredRule('算法平台不能为空')
};
// ============> data
const router = useRouter();
const appStore = useAppStore();


const createForm = ref(null);
// 提交创建算法的参数对象
const taskData = ref({
  stepFinished: false,
  createFlag: false,
  name: '',
  system: null,
  userParamId: null,
  linkMoudleIds: [],
  description: '',
  optIds: []
});
// 算法步骤选择时修改过渡动画的标识
const stepTransition = ref('stepright');
// 算法组合步骤对象
const steps = ref({
  one: {
    key: 'one',
    select: null,
    title: '选择支持载体格式类型',
    options: []
  },
  two: {
    key: 'two',
    select: null,
    title: '是否支持社交网络信道鲁棒隐写',
    options: []
  },
  three: {
    key: 'three',
    select: null,
    title: '选择信道',
    options: []
  },
  four: {
    key: 'four',
    select: null,
    title: '选择隐写编码算法',
    options: []
  },
  five: {
    key: 'five',
    select: null,
    title: '选择隐写失真代价函数',
    options: []
  }
})
// 算法组合当前步骤绑定对象
const currentStep = ref(null);
// 算法参数对象
const parameter = ref({
  condition: {
    name: '',
    loading: false,
    pageSize: api.common.pageSize,
    pageNumber: 0,
    totalRow: 0
  },
  conditionList: [],
  list: [],
  select: null,
  key: 'parameter',
  title: '参数选择'
});
// 组合算法对应的模块库列表
const moduleLibs = ref([]);
const currentModuleLib = ref(null);
const moduleRef = ref(null);
const moduleDialogFlag = ref(false);


// ============> computed
const getShow = computed(() => {
  return function (v, k, arr, returnKey) {
    let obj = arr.find((item) => item[k] === v);
    let res = obj ? obj[returnKey] : "--";
    return res;
  };
});
const isBtnGroupsShow = computed(() => {
  let setModuleLib = moduleLibs.value.reduce((resArr, item) => {
    if (item.select) resArr.push(item.select);
    return resArr;
  }, []);
  let flag = (currentStep.value.key === 'five' && currentStep.value.select) && moduleLibs.value.length > 0 && setModuleLib.length === moduleLibs.value.length;
  return flag;
});


// ============> hooks
for (let step in steps.value){
  steps.value[step].options = JSON.parse(JSON.stringify(defaultOptions[step]));
}
currentStep.value = steps.value.one;

onMounted(() => {
  getParameters()
})

// ============> methods
// 条件筛选参数列表
function conditionGetParameters(conditionKey, conditionValue, conditionLabel){
  if (conditionValue){
    let conditionItem = parameter.value.conditionList.find(cond => cond.key === conditionKey);
    if (conditionItem) {
      conditionItem.value = conditionValue;
      conditionItem.label = conditionLabel;
    } else {
      parameter.value.conditionList.push({
        key: conditionKey,
        value: conditionValue,
        label: conditionLabel,
      });
    }
  } else {
    let conditionIndex = parameter.value.conditionList.findIndex(cond => cond.key === conditionKey);
    parameter.value.conditionList.splice(conditionIndex, 1);
  }
  parameter.value.condition.pageNumber = 0;
  parameter.value.condition.totalRow = 0;
  parameter.value.list = []
  getParameters();
}
// 点击参数列表筛选条件的关闭事件
function delParameterCondition(conditionKey){
  parameter.value.condition[conditionKey] = null;
  let condIndex = parameter.value.conditionList.findIndex(cond => cond.key === conditionKey);
  parameter.value.conditionList.splice(condIndex, 1);
  parameter.value.condition.pageNumber = 0;
  parameter.value.condition.totalRow = 0;
  parameter.value.list = [];
  getParameters();
}
// 获取参数列表
function getParameters(){
  if (parameter.value.condition.pageNumber > 0 && parameter.value.list.length >= parameter.value.condition.totalRow) {
    return;
  }
  parameter.value.condition.pageNumber++;
  parameter.value.condition.loading = true;
  getParameterList(parameter.value.condition)
    .then(res => {
      if (res){
        parameter.value.list = parameter.value.list.concat(res.records);
        parameter.value.condition.pageNumber = res.pageNumber;
        parameter.value.condition.totalRow = res.totalRow;
      }
    })
    .catch(err => {
      console.log(err);
    })
    .finally(() => {
      parameter.value.condition.loading = false;
    })
}
// 条件筛选模块列表
function conditionGetModules(item, conditionKey, conditionValue, conditionLabel){
  if (conditionValue){
    let conditionItem = item.conditionList.find(cond => cond.key === conditionKey);
    if (conditionItem) {
      conditionItem.value = conditionValue;
      conditionItem.label = conditionLabel;
    } else {
      item.conditionList.push({
        key: conditionKey,
        value: conditionValue,
        label: conditionLabel,
      });
    }
  } else {
    let conditionIndex = item.conditionList.findIndex(cond => cond.key === conditionKey);
    item.conditionList.splice(conditionIndex, 1);
  }
  item.condition.pageNumber = 0;
  item.condition.totalRow = 0;
  item.list = []
  getModuleByLib(item);
}
// 获取模块库对应的模块
function getModuleByLib(item){
  if (item.condition.pageNumber > 0 && item.list.length >= item.condition.totalRow){
    return;
  }
  item.condition.pageNumber++;
  item.condition.loading = true;
  getModuleAlgos(item.condition)
    .then(res => {
      if (res){
        item.list = item.list.concat(res.records);
        item.condition.pageNumber = res.pageNumber;
        item.condition.totalRow = res.totalRow;
      }
    })
    .catch(err => {
      console.log('err');
    })
    .finally(() => {
      item.condition.loading = false;
    })
}
//  ======> 表格式 <=====
// 打开弹框
function showModuleSelect(item){
  currentModuleLib.value = item;
  moduleDialogFlag.value = true;
  nextTick(() => {
    if (moduleRef.value && currentModuleLib.value.select){
      let selectRow = currentModuleLib.value.list.find(item => item.id === currentModuleLib.value.select)
      moduleRef.value.setCurrentRow(selectRow);
    }
  })
}
// 弹框确认事件
function handleModuleDialogConfirm(){
  if (!currentModuleLib.value.select){
    ElMessage.warning('您还未进行模块选择!');
    return;
  }
  moduleDialogFlag.value = false;
}
// 弹框取消事件
function handleModuleDialogCancel(){
  moduleDialogFlag.value = false;
}
// 弹框的分页事件
function moduleDialogPageChange(e){
  currentModuleLib.value.condition.pageSize = e.limit;
  currentModuleLib.value.condition.pageNumber = e.page;
  getModuleByLibTable(currentModuleLib.value)
}
function moduleSelectTable(e){
  currentModuleLib.value.select = e.id;
  currentModuleLib.value.moduleName = e.name;
}
// 拉取模块库对应模块
function getModuleByLibTable(item){
  item.condition.loading = true;
  getModuleAlgos(item.condition)
    .then(res => {
      item.list = res.records && Array.isArray(res.records) ? res.records : [];
      item.condition.pageNumber = +res.pageNumber;
      item.condition.pageSize = +res.pageSize;
      item.condition.totalRow = +res.totalRow;
      item.condition.loading = false;
    })
    .catch(err => {
      item.condition.loading = false;
    })
}
//  ======> 表格式 <=====
function systemChange(){
  taskData.value.stepFinished = false;
  moduleLibs.value = [];
  currentModuleLib.value = null;
}
// 算法组合点击上一步
function handlePrevious(){
  currentStep.value.select = null;
  stepTransition.value = 'stepleft';
  taskData.value.stepFinished = false;
  moduleLibs.value = [];
  currentModuleLib.value = null;
  if (currentStep.value.key === 'five'){
    currentStep.value = steps.value.four;
    return;
  }
  if (currentStep.value.key === 'four' && steps.value.one.select !== '110001'){
    currentStep.value = steps.value.one;
    return;
  } else if (currentStep.value.key === 'four' && steps.value.one.select === '110001' && steps.value.two.select === '210002') {
    currentStep.value = steps.value.two;
    return;
  } else if (currentStep.value.key === 'four' && steps.value.one.select === '110001' && steps.value.two.select === '210001'){
    currentStep.value = steps.value.three;
    return;
  }
  if (currentStep.value.key === 'three'){
    currentStep.value = steps.value.two;
    return;
  }
  if (currentStep.value.key === 'two'){
    currentStep.value = steps.value.one;
    return;
  }
}
// 算法组合点击下一步
function handleNext(){
  if (!currentStep.value.select){
    ElMessage.warning('当前流程未完成，请核对');
    return;
  }
  stepTransition.value = 'stepright';
  // 第一步选择jpeg
  if (currentStep.value.key === 'one' && currentStep.value.select === '110001') {
    currentStep.value = steps.value.two;
    return;
  } else if (currentStep.value.key === 'one' && currentStep.value.select !== '110001') {
    currentStep.value = steps.value.four;
    return;
  }
  if (currentStep.value.key === 'two' && currentStep.value.select === '210001'){
    currentStep.value = steps.value.three;
    return;
  } else if (currentStep.value.key === 'two' && currentStep.value.select !== '210001'){
    currentStep.value = steps.value.four;
    return;
  }
  if (currentStep.value.key === 'three'){
    currentStep.value = steps.value.four;
    return;
  }
  if (currentStep.value.key === 'four' && steps.value['one'].select !== '110001'){
    steps.value['five'].options = JSON.parse(JSON.stringify(defaultOptions.fiveC));
    currentStep.value = steps.value.five;
    return;
  } else if (currentStep.value.key === 'four' && steps.value['one'].select === '110001' && steps.value.two.select === '210002') {
    steps.value['five'].options = JSON.parse(JSON.stringify(defaultOptions.fiveA));
    currentStep.value = steps.value.five;
    return;
  } else if (currentStep.value.key === 'four' && steps.value['one'].select === '110001' && steps.value.two.select === '210001') {
    steps.value['five'].options = JSON.parse(JSON.stringify(defaultOptions.fiveB));
    currentStep.value = steps.value.five;
    return;
  }
  // 选择步骤完成拉取模块
  if (currentStep.value.key === 'five' && currentStep.value.select){
    getModuleLibs();
  }
}
// 步骤选择事件
function stepChange(){
  moduleLibs.value = [];
  taskData.value.stepFinished = false;
  currentModuleLib.value = null;
}
function getModuleLibs(){
  if (!taskData.value.system) {
    ElMessage.warning('请先选择算法平台');
    return;
  }
  let optIds = [];
  for (let key in steps.value){
    if (steps.value[key].select){
      optIds.push(steps.value[key].select);
    }
  }
  request.getStepLibs({system: taskData.value.system, optIds})
    .then(res => {
      if (Array.isArray(res) && res.length > 0){
        moduleLibs.value = res;
        initModuleLibs();
      } else {
        ElMessage.error('获取步骤对应模块静态库失败，请稍后重试或联系管理员');
      }
    })
    .catch(err => {
      console.log(err);
    })
}
// 初始化模块选择列表
function initModuleLibs(){
  let promises = [];
  moduleLibs.value.forEach(moduleLib => {
    moduleLib.select = null;
    moduleLib.key = moduleLib.moduleLibId;
    moduleLib.condition = {
      name: '',
      // system: null,
      system: taskData.value.system,
      status: null,
      moduleLibId: moduleLib.moduleLibId,
      loading: false,
      pageSize: api.common.pageSize,
      pageNumber: 1,
      totalRow: 0
    };
    moduleLib.list = [];
    if (moduleLib.isDef === 1 && moduleLib.moduleId && moduleLib.moduleName){
      moduleLib.select = moduleLib.moduleId;
      moduleLib.list.push({
        id: moduleLib.moduleId, 
        name: moduleLib.moduleName,
        system: taskData.value.system,
        // todo - 这里要搞一下默认选项的时间回显
        createTime: null
      });
    } else {
      promises.push(new Promise((resolve, reject) => {
        getModuleAlgos(moduleLib.condition)
          .then(res => {
            if (res){
              moduleLib.list = moduleLib.list.concat(res.records);
              moduleLib.condition.pageNumber = +res.pageNumber;
              moduleLib.condition.totalRow = +res.totalRow;
              resolve();
            } else {
              reject();
            }
          })
          .catch(err => {
            console.log(err);
            reject();
          })
      }))
    }
  });
  Promise.all(promises)
    .then(() => {
      taskData.value.stepFinished = true;
    })
    .catch(err => {
      console.log(err)
    })
}
// 组装选择的算法id
function getStepSelects(){
  let selects = [];
  for (let key in steps.value){
    if (steps.value[key].select){
      selects.push(steps.value[key].select);
    }
  }
  taskData.value.optIds = selects;
}
// 最后创建
function handleCreate(){
  if (taskData.value.createFlag){
    ElMessage.warning('当前正在创建组合算法，请稍后');
    return;
  }
  if (currentStep.value.key !== 'five' || (currentStep.value.key === 'five' && !currentStep.value.select)){
    ElMessage.warning('请先完成算法组合！');
    return;
  }
  let linkMoudleIds = moduleLibs.value.reduce((resArr, item) => {
    if (item.select) resArr.push(item.select);
    return resArr;
  }, []);
  if ((linkMoudleIds.length < moduleLibs.value.length) || linkMoudleIds.length == 0){
    ElMessage.warning('请先完成所有静态库模块选择！');
    return;
  }
  createForm.value.validate(valid => {
    if (valid){
      taskData.value.createFlag = true;
      appStore.openLoading('组合算法创建中...');
      getStepSelects();
      taskData.value.linkMoudleIds = linkMoudleIds;
      request.createAlgo(taskData.value)
        .then(res => {
          ElMessage.success('创建算法成功!');
          router.replace({ name: 'algorithmManage' });
        })
        .catch(() => {
          taskData.value.optIds = [];
        })
        .finally(() => {
          taskData.value.createFlag = false;
          appStore.closeLoading();
        })
    } else {
      ElMessage.warning('当前提交项填写信息有误，请核对后提交');
    }
  })
}
function back(){
  router.back();
}

</script>
<style lang='scss' scoped>
@import '@/assets/styles/mixin.scss';
.algo-title {
  text-align: center;
  margin: 20px 0;
  color: var(--color-main);
  font-size: 18px;
}
.algo-options {
  @include flex-all-center;
  flex-direction: column;
  .el-radio {
    width: 60%;
    height: 40px;
    margin: 10px 0;
    border: 1px solid var(--color-main-border);
    background-color: var(--color-white-10);
    border-radius: 10px;
    transition: all 0.3s linear;
    text-align: center;
    justify-content: center;
  }
  .el-radio.is-checked {
    border: 1px solid var(--color-theme-border);
    background-color: var(--color-main);
    
    &::v-deep .el-radio__label {
      color: var(--color-white-10);
    }
  }
  .el-radio.is-disabled {
    cursor: not-allowed;
    background-color: var(--color-black-2);
    &.is-checked {
      background-color: var(--color-main-3)
    }
    &::v-deep .el-radio__label {
      color: var(--color-white-10);
    }
  }
  &::v-deep .el-radio__input {
    display: none;
  }
}
.btn-container {
  margin-top: 25px;
  @include flex-all-center;
  .btns {
    width: 60%;
    @include flex-between-center;
    .btn {
      width: 49%;
    }
  }
}
.data-table-step {
  position: relative;
  .next {
    position: absolute;
    top: 0;
    right: 0;
    height: 100%;
    width: 100px;
    background: linear-gradient(to right, var(--color-white-1), var(--color-main-3), var(--color-main-5), var(--color-main-7), var(--color-main));
    transition: all 0.4s ease;
    transform: translateX(50px);
    border-radius: 4px;
    cursor: pointer;
  }
  .next:hover {
    background: var(--color-main);
    transform: translateX(0);
    border: 1px solid var(--color-white-10);
  }
}

.table-actions {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  height: 100%;
  .action {
    width: 80px;
  }
}
.green {
  color: var(--color-green);
}
.red {
  color: var(--color-red);
  @include red-text-shadow;
}
.blue {
  color: var(--color-text-hover);
  @include blue-text-shadow;
}
.main-color {
  color: var(--color-main);
  @include main-text-shadow;
}

.module-table {
  border: 1px solid var(--color-main);
}
.module-table {
  min-height: 30vh;
  &::v-deep .el-table__body tr.current-row>td.el-table__cell {
    background-color: var(--color-main-6);
    color: var(--color-white-10);
  }
}
</style>